<template>
  <div class="bpl2-bg">
    <div class="co-title">
      <div class="co-title-name">
        <img src="@/assets/cockpit/subdivision/js-text-dbqk.png" alt="" />
      </div>
      <div class="co-title-right">
        <div class="co-title-unit">单位：公顷</div>
      </div>
      <!-- <div class="co-title-right">
        <div class="co-title-breathe"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div> -->
    </div>

    <div class="bpl-container">
      <div class="lf">
        <p class="title">2021年度各县区市耕地面积情况</p>
        <div class="pq-echart-box" id="dbqkEchart"></div>
      </div>
      <div class="rg">
        <div class="floorage-tabs">
          <div :class="isActive === 1 ? 'active' : ''" @click="clickActive(1)">地区详情</div>
          <div :class="isActive === 2 ? 'active' : ''" @click="clickActive(2)">年份对比</div>
        </div>
        <div class="item">
          <div class="icon icon1"></div>
          <div class="text">批地</div>
        </div>
        <div class="item">
          <div class="icon icon2"></div>
          <div class="text">供地</div>
        </div>
        <div class="item">
          <div class="icon icon3"></div>
          <div class="text">储备地</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import echarts from 'echarts'
@Component({
  name: 'BuildLandItem4',
  components: {}
})
export default class BuildLandItem4 extends Vue {
  private num = 15
  private total = 20
  private percent = 90
  private lightLeval = 0
  private isActive = 1

  clickActive(type: number) {
    this.isActive = type
  }

  mounted() {
    this.initVillage2()
  }

  initVillage2() {
    const myChart = echarts.init(document.getElementById('dbqkEchart') as HTMLElement)
    myChart.setOption({
      label: {
        color: '#ffffff'
      },
      dataset: {
        source: [
          ['product', '2015', '2016', '2017'],
          ['2017', 43.3, 85.8, 93.7],
          ['2018', 83.1, 73.4, 55.1],
          ['2019', 86.4, 65.2, 82.5],
          ['2020', 72.4, 53.9, 39.1],
          ['当前', 72.4, 53.9, 39.1]
        ]
      },
      grid: {
        top: '4%',
        left: '0%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // data: ['2017', '2018', '2019', '2020', '当前'],
        //设置网格线颜色
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#254177'
          }
        },
        axisLabel: {
          show: true,
          // interval: 0,
          // rotate: 40,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 10 //更改坐标轴文字大小
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#223e75'],
            width: 1,
            type: 'solid'
          }
        },
        // y轴轴线颜色
        axisLine: {
          lineStyle: {
            color: '#254177',
            width: 0 //这里是坐标轴的宽度
          }
        }
      },
      series: [
        {
          // data: [68, 77, 13, 44, 16, 79],
          type: 'bar',
          barWidth: '25%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#3DC8FC'
              },
              {
                offset: 0.5,
                color: '#1C96EF'
              },
              {
                offset: 1,
                color: '#245ABF'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        },
        {
          // data: [68, 77, 13, 44, 16, 79],
          type: 'bar',
          barWidth: '25%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#2EFFAF'
              },
              {
                offset: 0.5,
                color: '#00FFAA'
              },
              {
                offset: 1,
                color: '#21C18B'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        },
        {
          // data: [68, 77, 13, 44, 16, 79],
          type: 'bar',
          barWidth: '25%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FFEB7B'
              },
              {
                offset: 0.5,
                color: '#ECBF45'
              },
              {
                offset: 1,
                color: '#AB9700'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpl2-bg {
  width: 100%;
  height: 100%;
  padding: 22px 12px 12px 16px;
  // background: url('~@/assets/cockpit/bpl1-bg.png') no-repeat right center/ 100% 100%;
  background: url('~@/assets/cockpit/bb-bg.png') no-repeat 0/ 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.co-title-unit {
  font-size: 12px !important;
  line-height: 20px;
  color: #dffeff;
}
.bpl-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  .lf {
    flex: 4;

    .title {
      font-size: 14px !important;
      color: #dffeff;
    }
    .pq-echart-box {
      width: 100%;
      height: 130px;
      margin-top: 10px;
    }
  }
  .rg {
    flex: 1;
    margin-top: 40px;
    position: relative;
    .item {
      display: flex;
      margin-top: 16px;
      margin-left: 12px;
      .icon {
        width: 6px;
        height: 6px;

        margin-top: 4px;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg); /* IE 9 */
        -moz-transform: rotate(45deg); /* Firefox */
        -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
        -o-transform: rotate(45deg); /* Opera */
      }
      .icon1 {
        background: linear-gradient(180deg, #3dc8fc 0%, #1c96ef 50%, #245abf 100%);
      }
      .icon2 {
        background: linear-gradient(180deg, #2effaf 0%, #0fa 50%, #21c18b 100%);
      }
      .icon3 {
        background: linear-gradient(180deg, #ffeb7b 0%, #ecbf45 50%, #ab9700 100%);
      }
      .text {
        font-size: 12px !important;
        color: #dffeff;
        margin-left: 8px;
      }
    }
  }
}
.floorage-tabs {
  position: absolute;
  top: -60px;
  right: 0;
  font-size: 14px !important;
  text-align: center;
  color: #fff;
  display: flex;
  margin: 15px auto 6px auto;
  .active {
    color: #fff;
    font-weight: 500;
    font-size: 14px !important;
    background: url('~@/assets/cockpit/subdivision/text-bg.png') no-repeat 0/ 100% 100%;
    opacity: 1 !important;
  }
  div {
    width: 85px;
    height: 26px;
    line-height: 26px;
    background: rgba(0, 0, 0, 0.15);
    opacity: 0.7;
    cursor: pointer;
  }
}
</style>
